<template>
  <div class="page">
    <div class="page-container">
      <PromotionalVideo />
      <div class="frame-SRf-2 ">
        <Header activeId="1" />
        <div class="frame-vKA-2">
          <div class="frame-YLE-1">
            <div class="vec-rectangle-VSM-1" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
              <img src="/mock/images/653b254e4f6ffe66c61a5850.png" />
            </div>
          </div>
        </div>
        <div class="frame-vZG-2">
          <div class="frame-ZdM-1">
            <div class="vec-rectangle-yeI-1" style="visibility: visible; opacity: 1; transform-origin: 50% 50%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
              <img src="/mock/images/653b250f48f711670eb4c49b.png" />
            </div>
            <div class="frame-EGA-2">
              <div class="text-RSS-1" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                <div class="p-text-RSS-1">
                  <span class="span-ewo-1">感受千佛岩石窟的古朴魅力</span>
                </div>
              </div>
              <div class="text-Nha-2" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                <div class="p-text-Nha-2">
                  <span class="span-eiB-1 ">千佛岩石窟是中国的文化遗产，以其独特的艺术价值和历史意义闻名于世。这些石窟以其精美的佛教艺术雕刻而著名，是佛教信仰和文化的重要象征。欢迎来到千佛岩石窟，探索这一古老而神秘的世界。</span>
                </div>
              </div>
              <a href="/news/item?id=1" class="frame-rQI-3" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                <div class="text-HKd-1">
                  <div class="p-text-HKd-1">
                    <span class="span-wXS-1 ">
                      了解更多
                    </span>
                  </div>
                </div>
                <div class="frame-qRg-2"></div>
              </a>
            </div>
          </div>
        </div>
        <div class="frame-OqP-3">
          <div class="frame-ePZ-1">
            <div class="frame-tkO-1">
              <div class="frame-qqv-2" style="width:100%">
                <b-row class="justify-content-md-start" style="width:100%">
                  <b-col xs="12" sm="4">
                    <div class="text-center item-block">
                      <a href="/news/item?id=1" class="vec-rectangle-vjX-1">
                        <img src="/mock/images/0001.png" />
                      </a>
                    </div>
                  </b-col>
                  <b-col xs="12" sm="4">
                    <div class="text-center item-block">
                      <a href="/news/item?id=1" class="vec-rectangle-vjX-1">
                        <img src="/mock/images/0002.png" />
                      </a>
                    </div>
                  </b-col>
                  <b-col xs="12" sm="4">
                    <div class="text-center item-block">
                      <a href="/news/item?id=1" class="vec-rectangle-vjX-1">
                        <img src="/mock/images/0003.png" />
                      </a>
                    </div>
                  </b-col>
                </b-row>
              </div>
            </div>
            <div class="frame-dBZ-2">
              <div class="frame-Fmj-1">
                <div class="text-IIt-1" style="visibility: visible; opacity: 1; transform-origin: 0% 0%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                  <div class="p-text-IIt-1">
                    <span class="span-kFd-1">千佛岩石窟</span>
                  </div>
                </div>
                <div class="text-cux-2">
                  <div class="p-text-cux-2">
                    <span class="span-kJx-1">千佛岩石窟位于中国甘肃省敦煌市，是一座规模宏大的石窟艺术宝库。它以其精美的浮雕雕塑和丰富的佛教艺术而闻名于世。千佛岩石窟共有40多个洞窟，壁画精美，造型多样，是中国石窟艺术的瑰宝之一。</span>
                  </div>
                </div>
                <div class="frame-ipf-3">
                  <div class="frame-Qdr-1">
                    <div class="frame-SRA-1">
                      <div class="text-Fps-1">
                        <div class="p-text-Fps-1">
                          <span class="span-ocy-1 ">
                            导览漫游推介
                          </span>
                        </div>
                      </div>
                      <div class="img-syL-2"></div>
                    </div>
                    <div class="frame-sQK-2">
                      <div class="text-Bcq-1">
                        <div class="p-text-Bcq-1">
                          <span class="span-hqz-1 ">
                            精品石窟展
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="frame-IyJ-3">
                      <div class="text-lIL-1">
                        <div class="p-text-lIL-1">
                          <span class="span-xSN-1 ">
                            在线预约
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="text-eTQ-2">
                    <div class="p-text-eTQ-2">
                      <span class="span-aQT-1">千佛岩石窟是中国著名的石窟艺术宝库之一。这里有精美的浮雕雕塑、壁画和佛教文化的丰富内涵。游客可以在这里欣赏到各种不同风格的佛教艺术作品，感受到古代艺术的魅力。</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="frame-fCD-2">
                <div class="frame-wpe-1">
                  <div class="frame-XXe-1" style="visibility: visible; opacity: 1; transform-origin: 50% 0%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                    <div class="text-dji-1">
                      <div class="p-text-dji-1">
                        <span class="span-xnm-1 ">
                          ￥100起
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="frame-MgN-2" style="visibility: visible; opacity: 1; transform-origin: 50% 0%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                    <div class="frame-zek-1">
                      <div class="img-ASl-1"></div>
                      <div class="img-rmF-2"></div>
                    </div>
                    <div class="text-opE-2">
                      <div class="p-text-opE-2">
                        <span class="span-NbV-1">⭐️⭐️⭐️⭐️</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="frame-Soz-2">
                  <div class="frame-ots-1" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                    <div class="text-yix-1">
                      <div class="p-text-yix-1">
                        <span class="span-sFs-1">选择日期</span>
                      </div>
                    </div>
                    <div class="frame-rGa-2">
                      <div class="frame-pux-1">
                        <div class="frame-rNg-1">
                          <div class="text-Hzk-1">
                            <div class="p-text-Hzk-1">
                              <span class="span-NlE-1">2022-01-01</span>
                            </div>
                          </div>
                        </div>
                        <div class="frame-euD-2">
                          <div class="text-peb-1">
                            <div class="p-text-peb-1">
                              <span class="span-McY-1">2022-02-01</span>
                            </div>
                          </div>
                        </div>
                        <div class="frame-suM-3">
                          <div class="text-RRd-1">
                            <div class="p-text-RRd-1">
                              <span class="span-fSF-1">2022-03-01</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="frame-VVi-2" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                    <div class="text-UAD-1">
                      <div class="p-text-UAD-1">
                        <span class="span-xuS-1">选择人数</span>
                      </div>
                    </div>
                    <div class="frame-vVy-2">
                      <div class="frame-zod-1">
                        <div class="frame-mhD-1">
                          <div class="text-Tkc-1">
                            <div class="p-text-Tkc-1">
                              <span class="span-KPR-1">1人</span>
                            </div>
                          </div>
                        </div>
                        <div class="frame-uGF-2">
                          <div class="text-GWA-1">
                            <div class="p-text-GWA-1">
                              <span class="span-jlp-1">2人</span>
                            </div>
                          </div>
                        </div>
                        <div class="frame-vIV-3">
                          <div class="text-LvE-1">
                            <div class="p-text-LvE-1">
                              <span class="span-TKW-1">3人</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="/service/form" class="frame-EdL-3">
                  <div class="frame-bFd-1" style="visibility: visible; opacity: 1; transform-origin: 50% 100%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
                    <div class="text-jJU-1">
                      <div class="p-text-jJU-1">
                        <span class="span-lFE-1">立即预约</span>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="frame-QoK-4">
          <div class="frame-Gdm-1" style="visibility: visible; opacity: 1; transform-origin: 50% 50%; transform: translate(0px, 0px) rotate(0deg) scale(1);">
            <div class="text-jVQ-1">
              <div class="p-text-jVQ-1">
                <span class="span-jFv-1">千佛岩石窟风光</span>
              </div>
            </div>
            <div class="text-hEC-2">
              <div class="p-text-hEC-2">
                <span class="span-oUL-1">以下是千佛岩石窟的精美景观照片，欢迎您来观赏。</span>
              </div>
            </div>
          </div>
          <b-row class="justify-content-md-start">
            <b-col xs="12" sm="6" lg="4" v-for="(item,i) in list" :key="i">
              <div class="frame-kpJ-1" style="visibility: visible; opacity: 1;">
                <a :href="'/culture/item?id=' + item.id" class="vec-rectangle-Nag-1">
                  <img :src="item.image" />
                </a>
                <div class="frame-KbU-2">
                  <div class="frame-rKX-2">
                    <div class="text-hfz-1">
                      <div class="p-text-hfz-1">
                        <span class="span-HNJ-1">{{ item.author }}</span>
                      </div>
                    </div>
                    <div class="frame-SjE-2">
                      <div class="text-rtX-1">
                        <div class="p-text-rtX-1">
                          <span class="span-Wss-1">{{ item.date }}</span>
                        </div>
                      </div>
                      <div class="text-XAu-2">
                        <div class="p-text-XAu-2">
                          <span class="span-lZz-1">•</span>
                        </div>
                      </div>
                      <div class="text-RUD-3">
                        <div class="p-text-RUD-3">
                          <span class="span-UNi-1 ">{{ item.time }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </b-col>
          </b-row>
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import PromotionalVideo from '@/components/promotional-video.vue'

export default {
  name: 'IndexPage',

  components: {
    Header,
    Footer,
    PromotionalVideo
  },

  data () {
    return {
      list: [
        {
          id: 1,
          image: '/mock/images/0001.png',
          author: '安少华',
          date: '2018-05-01',
          time: '13:43:51'
        },
        {
          id: 2,
          image: '/mock/images/0002.png',
          author: '郝平',
          date: '1993-02-20',
          time: '14:24:19'
        },
        {
          id: 3,
          image: '/mock/images/0003.png',
          author: '严明',
          date: '1986-12-05',
          time: '11:22:04'
        },
        {
          id: 4,
          image: '/mock/images/0004.png',
          author: '彭军',
          date: '1988-05-24',
          time: '23:06:10'
        },
        {
          id: 5,
          image: '/mock/images/0005.png',
          author: '尤刚',
          date: '1983-03-13',
          time: '11:57:45'
        },
        {
          id: 6,
          image: '/mock/images/0006.png',
          author: '汤超',
          date: '2021-04-19',
          time: '06:39:15'
        },
      ]
    }
  },

  async asyncData({ $service, $axios }) {
    // 系统配置
    let res = await $service.system.queryIndex({}, {
      $http: $axios
    })
    return {}
  },

  fetch({ app, store, params }) {
    console.log('fetch')
  },

  beforeMount () {
    window.jQuery = window.$ = this.jQuery
  }
}
</script>

<style lang="less">
@import '../assets/css/index.less';
</style>
<style lang="less" scoped>
.frame-kpJ-1 {
  margin-bottom: 24px;
  padding: 16px;
  .vec-rectangle-Nag-1 {
    overflow: hidden;
    border-radius: 16px;
  }
}
</style>